<template>
	<div class="tabbar">
		<div class="head">
			<mt-header fixed :title='title'>
				<span slot="left" v-if="backFlag" @click="goBack">
					<mt-button icon="back"></mt-button>
				</span>
				<mt-button icon="back"></mt-button>
				<mt-button class="mui-icon-extra mui-icon-extra-sweep" slot="right" v-show='scanFlag'></mt-button>
			</mt-header>
		</div>
		<router-view />
		<nav class="mui-bar mui-bar-tab">
			<a class="mui-tab-item-llb" @click.prevent="goTask" :class="{'mui-active':$route.path.startsWith('/tabbar/task')}">
				<span class="mui-icon mui-icon-extra mui-icon-extra-regist"></span>
				<span class="mui-tab-label">任务</span>
			</a>
			<a class="mui-tab-item-llb" @click.prevent="goMsg" :class="{'mui-active':$route.path.startsWith('/tabbar/msg')}">
				<span class="mui-icon mui-icon-chat"><span class="mui-badge" id='badge'>5</span></span>
				<span class="mui-tab-label">消息</span>
			</a>
			<a class="mui-tab-item-llb" @click.prevent="goReport" :class="{'mui-active':$route.path.startsWith('/tabbar/report')}">
				<span class="mui-icon el-icon-tickets"></span>
				<span class="mui-tab-label">简报</span>
			</a>
			<a class="mui-tab-item-llb" @click.prevent="goWorkSpace" :class="{'mui-active':$route.path.startsWith('/tabbar/workSpace')}">
				<span class="mui-icon el-icon-view"></span>
				<span class="mui-tab-label">透明车间</span>
			</a>
			<a class="mui-tab-item-llb" @click.prevent="goUser" :class="{'mui-active':$route.path.startsWith('/tabbar/user')}">
				<span class="mui-icon el-icon-user"></span>
				<span class="mui-tab-label">我</span>
			</a>
		</nav>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				title: '',
				backFlag:false,
				scanFlag:false,
				path: this.$route.path
			}
		},
		created() {
			this.matchTitle(this.path)
		},
		methods: {
			goBack() {
				this.$router.go(-1)
			},
			goTask() {
				this.$router.push({
					name: 'task'
				})
			},
			goMsg() {
				this.$router.push({
					name: 'msg'
				})
			},
			goReport() {
				this.$router.push({
					name: 'report'
				})
			},
			goWorkSpace() {
				this.$router.push({
					name: 'workSpace'
				})
			},
			goUser() {
				this.$router.push({
					name: 'user'
				})
			},
			matchTitle(path) {
				if (path === '/tabbar/task') {
					this.title = '任务中心'
					this.backFlag = false
					this.scanFlag = false
				} else if (path === '/tabbar/msg') {
					this.backFlag = false
					this.title = '消息'
					this.scanFlag = false
				}else if(path==='/tabbar/msg/abnormal'){
					this.backFlag = true
					this.title = '消息'
					this.scanFlag = false
				}
				else if(path==='/tabbar/msg/lackResource'){
					this.backFlag = true
					this.title = '消息'
					this.scanFlag = false
				}
				else if(path==='/tabbar/msg/callEquip'){
					this.backFlag = true
					this.title = '消息'
					this.scanFlag = false
				}
				else if (path === '/tabbar/report') {
					this.backFlag = false
					this.title = '生产简报'
					this.scanFlag = false
				} else if (path === '/tabbar/workSpace') {
					this.backFlag = false
					this.title = '透明车间'
					this.scanFlag = false
				} else if (path === '/tabbar/user') {
					this.backFlag = false
					this.title = '工作中心'
					this.scanFlag = false
				} else if (path === '/tabbar/task/dealShort') {
					this.title = '缺料处理列表'
					this.backFlag = true
					this.scanFlag = true
				} else if(path === '/tabbar/task/deal'){
					this.title = '缺料处理'
					this.backFlag = true
					this.scanFlag = false
				} else if(path === '/tabbar/task/dealPerson'){
					this.title = '选择处理人'
					this.backFlag = true
					this.scanFlag = false
				}else if(path === '/tabbar/task/addOrder'){
					this.title = '编辑工单'
					this.backFlag = true
					this.scanFlag = false
				}else if(path === '/tabbar/task/orderNum'){
					this.title = '选择订单'
					this.backFlag = true
					this.scanFlag = false
				}else if(path === '/tabbar/task/product'){
					this.title = '选择产品'
					this.backFlag = true
					this.scanFlag = false
				}else if(path === '/tabbar/task/way'){
					this.title = '选择工艺路线'
					this.backFlag = true
					this.scanFlag = false

				}else if(path === '/tabbar/task/leaveWork'){
					this.title = '离岗登记'
					this.backFlag = true
					this.scanFlag = false
				}else if(path === '/tabbar/task/snQuality'){
					this.title = '制程检验 (SN)'
					this.backFlag = true
					this.scanFlag = true
				}else if(path === '/tabbar/task/snSuccessTest'){
					this.title = '成品检验 (SN)'
					this.backFlag = true
					this.scanFlag = true
				}else if(path === '/tabbar/task/snRepair'){
					this.title = '维修中心 (SN)'
					this.backFlag = true
					this.scanFlag = true
				}else if(path === '/tabbar/task/repairCenter'){
					this.title = '维修中心'
					this.backFlag = true
					this.scanFlag = true
				}else if(path === '/tabbar/task/processTest'){
					this.title = '制程检验中心'
					this.backFlag = true
					this.scanFlag = true
				}else if(path === '/tabbar/task/productTest'){
					this.title = '成品检验中心'
					this.backFlag = true
					this.scanFlag = true
				}else if(path === '/tabbar/task/errorSure'){
					this.title = '异常鉴定列表'
					this.backFlag = true
					this.scanFlag = true
				}else if(path === '/tabbar/task/editProcessTest'){
					this.title = '制程检验编辑'
					this.backFlag = true
					this.scanFlag = false
				}else if(path === '/tabbar/task/productTestLast'){
					this.title = '成品检验'
					this.backFlag = true
					this.scanFlag = false
				}else if(path === '/tabbar/task/repairCenterLast'){
					this.title = '维修中心'
					this.backFlag = true
					this.scanFlag = false

				}else if(path === '/tabbar/task/searchOrder'){
					this.title = '工单查询'
					this.backFlag = true
					this.scanFlag = true
				}else if(path === '/tabbar/task/orderInput'){
					this.title = '工单投产'
					this.scanFlag = true
					this.backFlag = true
				}else if(path === '/tabbar/task/process'){
					this.title = '选择工艺路线'
					this.scanFlag = false
					this.backFlag = true
				}else if(path === '/tabbar/task/produceInput'){
					this.title = '工单列表'
					this.scanFlag = true
					this.backFlag = true
				}else if(path === '/tabbar/task/dealProduceInput'){
					this.title = '生产投料'
					this.scanFlag = true
					this.backFlag = true
				}else if(path === '/tabbar/task/optionsInput'){
					this.title = '选择产品'
					this.scanFlag = false
					this.backFlag = true
				}else if(path === '/tabbar/task/productionReport'){
					this.title = '生产报工'
					this.scanFlag = false
					this.backFlag = true
				}else if(path === '/tabbar/task/orderBack'){
					this.title = '工单返工'
					this.scanFlag = false
					this.backFlag = true
				}else if(path === '/tabbar/task/searchJobOrder'){
					this.title = '派工单查询'
					this.scanFlag = true
					this.backFlag = true
				}else if(path === '/tabbar/task/jobOrderInput'){
					this.title = '派工单列表'
					this.scanFlag = true
					this.backFlag = true
				}else if(path === '/tabbar/task/jobInput'){
					this.title = '派工单生产投料'
					this.scanFlag = true
					this.backFlag = true
				}else if(path === '/tabbar/task/jobOptionInput'){
					this.title = '选择产品'
					this.scanFlag = false
					this.backFlag = true
				}else if(path === '/tabbar/task/jobOrderAndBooking'){
					this.title = '派工单报工'
					this.backFlag = true
					this.scanFlag = false
				}else if(path === '/tabbar/task/jobOrderBack'){
					this.title = '派工返工'
					this.backFlag = true
					this.scanFlag = false
				}else if(path === '/tabbar/task/taskAbnormal'){
					this.title = '异常呼叫'
					this.scanFlag = true
					this.backFlag = true
				}else if(path === '/tabbar/task/abnormalType'){
					this.title = '选择异常类型'
					this.scanFlag = false
					this.backFlag = true
				}else if(path === '/tabbar/task/abnormalDealPer'){
					this.title = '选择处理人'
					this.scanFlag = false
					this.backFlag = true
				}else if(path === '/tabbar/task/deviceCall'){
					this.title = '设备呼叫'
					this.backFlag = true
					this.scanFlag = true
				}else if(path === '/tabbar/task/deviceAbnormalType'){
					this.title = '选择异常类型'
					this.scanFlag = false
					this.backFlag = true
				}else if(path === '/tabbar/task/shortCall'){
					this.title = '缺料呼叫'
					this.scanFlag = true
					this.backFlag = true
				}else if(path === '/tabbar/task/addMatter'){
					this.title = '选择料号'
					this.scanFlag = false
					this.backFlag = true
				}else if(path ==='/tabbar/task/dealAbnormal'){
					this.title = '异常处理列表'
					this.scanFlag = true
					this.backFlag = true
				}else if(path === '/tabbar/task/dealDevice'){
					this.title = '设备处理列表'
					this.scanFlag = true
					this.backFlag = true
				}else if(path === '/tabbar/task/dealDeviceInfo'){
					this.title = '设备处理'
					this.scanFlag = false
					this.backFlag = true

				}else if(path === '/tabbar/task/leaveWork'){
					this.title = '离岗登记'
					this.backFlag = true
					this.scanFlag = false
				}else if(path === '/tabbar/task/snQuality'){
					this.title = '制程检验 (SN)'
					this.backFlag = true
					this.scanFlag = true
				}else if(path === '/tabbar/task/snSuccessTest'){
					this.title = '成品检验 (SN)'
					this.backFlag = true
					this.scanFlag = true
				}else if(path === '/tabbar/task/snRepair'){
					this.title = '维修中心 (SN)'
					this.backFlag = true
					this.scanFlag = true
				}else if(path === '/tabbar/task/repairCenter'){
					this.title = '维修中心'
					this.backFlag = true
					this.scanFlag = true
				}else if(path === '/tabbar/task/processTest'){
					this.title = '制程检验中心'
					this.backFlag = true
					this.scanFlag = true
				}else if(path === '/tabbar/task/productTest'){
					this.title = '成品检验中心'
					this.backFlag = true
					this.scanFlag = true
				}else if(path === '/tabbar/task/errorSure'){
					this.title = '异常鉴定列表'
					this.backFlag = true
					this.scanFlag = true
				}else if(path === '/tabbar/task/editProcessTest'){
					this.title = '制程检验编辑'
					this.backFlag = true
					this.scanFlag = false
				}else if(path === '/tabbar/task/productTestLast'){
					this.title = '成品检验'
					this.backFlag = true
					this.scanFlag = false
				}else if(path === '/tabbar/task/repairCenterLast'){
					this.title = '维修中心'
					this.backFlag = true
					this.scanFlag = false

				}
				else if(path === '/tabbar/task/lookDealShort'){
					this.title = '缺料处理'
					this.scanFlag = false
					this.backFlag = true
				}
				else if(path === '/tabbar/task/lookAbnormal'){
					this.title = '异常处理'
					this.scanFlag = false
					this.backFlag = true
				}else if(path === '/tabbar/task/lookDeviceAbnormal'){
					this.title = '设备处理'
					this.scanFlag = false
					this.backFlag = true

				}
			}
		},
		watch: {
			//监听路由变化
			'$route.path': function(newVal) {
				this.matchTitle(newVal)
			},
		}
	}
</script>

<style scoped="scoped">
	.head{
		margin-bottom: 60px;
	}
	.mint-header .mint-button{
		font-size: 22px;
	}
	.mint-header-title {
		font-size: 16px;
		font-weight: bold;
		margin: 0;
	}
		.mui-bar-tab .mui-tab-item-llb.mui-active {
	    color: #007aff;
	}
	
	.mui-bar-tab .mui-tab-item-llb {
	    display: table-cell;
	    overflow: hidden;
	    width: 1%;
	    height: 50px;
	    text-align: center;
	    vertical-align: middle;
	    white-space: nowrap;
	    text-overflow: ellipsis;
	    color: #929292;
	}
	
	.mui-bar-tab .mui-tab-item-llb .mui-icon {
	    top: 3px;
	    width: 24px;
	    height: 24px;
	    padding-top: 0;
	    padding-bottom: 0;
	}
	
	.mui-bar-tab .mui-tab-item-llb .mui-icon~.mui-tab-label {
	    font-size: 11px;
	    display: block;
	    overflow: hidden;
	    text-overflow: ellipsis;
	}
</style>
